/**
 * Created by Ysssssss on 2021/4/6.
 */

import React, {createContext, useImperativeHandle, useState, forwardRef} from 'react'
import {Modal, Button} from "antd";


export const CustomizeModalContext = createContext()

const CustomizeModal = (props, ref) => {
    const { children, title, width = 640, className } = props
    const [ visible, setVisible ] = useState(false)
    const [ params, setParams ] = useState({})

    const show = (arg = {}) => {
        setParams(arg)
        setVisible(true)
    }
    const hide = () => {
        setVisible(false)
        setParams({})
    }

    useImperativeHandle(ref, () => ({
        show,
        hide,
    }));

    return (
        <Modal
            className={className}
            title={title}
            width={width}
            maskClosable={false}
            visible={visible}
            onCancel={hide}
            destroyOnClose={true}
            footer={null}
        >
            <CustomizeModalContext.Provider
                value={{
                    visible,
                    hide,
                    params,
                }}
            >
                { children }
            </CustomizeModalContext.Provider>
        </Modal>
    )
}

export const CustomizeModalButton = props => {
    const { onOk = () => {}, onCancel = () => {}, okText = '确定', cancelText = '取消' } = props

    return (
        <div className="modal-button-line">
            <Button className="mgr-16" onClick={onCancel}>{ cancelText }</Button>
            <Button type="primary" onClick={onOk}>{ okText }</Button>
        </div>
    )
}

export default forwardRef(CustomizeModal)